<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Grid Layout Module Level 2</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="exploring" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. Level 2 expands Grid by adding “subgrid” capabilities for nested grids to participate in the sizing of their parent grids; and aspect-ratio&amp;ndash;controlled gutters." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/css-grid-2/" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */

.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Grid Layout Module Level 2</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-grid-2/">https://drafts.csswg.org/css-grid-2/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css-grid-2/">https://www.w3.org/TR/css-grid-2/</a>
      <dt>Previous Versions:
      <dd><a href="https://www.w3.org/TR/2018/WD-css-grid-2-20180804/" rel="prev">https://www.w3.org/TR/2018/WD-css-grid-2-20180804/</a>
      <dd><a href="https://www.w3.org/TR/2018/WD-css-grid-2-20180628/" rel="prev">https://www.w3.org/TR/2018/WD-css-grid-2-20180628/</a>
      <dt class="editor">Editors:
      <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://www.xanthir.com/contact/">Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (<span class="p-org org">Invited Expert</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="49885"><a class="p-name fn u-email email" href="mailto:ratan@microsoft.com">Rossen Atanassov</a> (<span class="p-org org">Microsoft</span>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-grid-2/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-grid-2">GitHub Issues</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid. Level 2 expands Grid by adding “subgrid” capabilities for nested grids to participate in the sizing of their parent grids; and aspect-ratio–controlled gutters.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-grid” in the title,
	preferably like this:
	“[css-grid] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
   <p><strong>The CSSWG has <a href="https://lists.w3.org/Archives/Public/www-style/2019Nov/0007.html">resolved</a> to move CSS Grid Level 2 to Candidate Recommendation. This transition is merely pending editorial work to merge the <a href="https://www.w3.org/TR/css-grid-1/">CSS Grid Level 1</a> prose into this document.</strong></p>
   <strong> </strong>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li>
     <a href="#subgrids"><span class="secno">2</span> <span class="content"> Subgrids</span></a>
     <ol class="toc">
      <li><a href="#subgrid-per-axis"><span class="secno">2.1</span> <span class="content"> Establishing a Subgrid</span></a>
      <li><a href="#subgrid-items"><span class="secno">2.2</span> <span class="content"> Characteristics of a Subgrid Item</span></a>
      <li><a href="#resolved-track-list"><span class="secno">2.3</span> <span class="content"> Resolved Value of a Track Listing</span></a>
      <li><a href="#subgrid-sizing"><span class="secno">2.4</span> <span class="content"> Subgrid Sizing Algorithm</span></a>
     </ol>
    <li>
     <a href="#changes"><span class="secno">3</span> <span class="content"> Changes</span></a>
     <ol class="toc">
      <li><a href="#changes-20180904"><span class="secno"></span> <span class="content"> Changes since the <span>August 2018
	CSS Grid Layout Level 2 Working Draft</span></span></a>
      <li><a href="#changes-20180628"><span class="secno"></span> <span class="content"> Changes since the <span>June 2018
	CSS Grid Layout Level 2 Working Draft</span></span></a>
      <li><a href="#changes-20180427"><span class="secno"></span> <span class="content"> Changes since the <span>April 2018
	CSS Grid Layout Level 2 Working Draft</span></span></a>
     </ol>
    <li><a href="#acknowledgements"><span class="secno">4</span> <span class="content"> Acknowledgements</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p>This level is currently maintained as a diff spec over the level 1 module <a data-link-type="biblio" href="#biblio-css-grid-1">[CSS-GRID-1]</a>.
	The main addition to Level 1 is the “subgrid” feature:
	a subgridded axis is one which matches up its grid lines
	to lines in the element’s parent’s grid,
	and which derives the sizes of its tracks
	through this integration with the parent grid.</p>
   <p class="issue" id="issue-3b09474d"><a class="self-link" href="#issue-3b09474d"></a> The full text of the Grid specification will be folded in when this draft reaches CR.</p>
   <h2 class="heading settled" data-level="2" id="subgrids"><span class="secno">2. </span><span class="content"> Subgrids</span><a class="self-link" href="#subgrids"></a></h2>
   <p>A <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item">grid item</a> can itself be a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container">grid container</a> by giving it <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display">display: grid</a>;
	in this case the layout of its contents will be independent of the layout of the grid it participates in.</p>
   <p>In some cases it might be necessary for the contents of multiple <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item①">grid items</a> to align to each other.
	A <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container①">grid container</a> that is itself a <span id="ref-for-grid-item②">grid item</span> can defer the definition of its rows and columns to its parent <span id="ref-for-grid-container②">grid container</span>,
	making it a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="subgrid">subgrid</dfn>.
	In this case, the <span id="ref-for-grid-item③">grid items</span> of the <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid">subgrid</a> participate in sizing the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid" id="ref-for-grid">grid</a> of the parent <span id="ref-for-grid-container③">grid container</span>,
	allowing the contents of both grids to align.</p>
   <div class="example" id="example-921f3930">
    <a class="self-link" href="#example-921f3930"></a> For example, suppose we have a form consisting of a list of inputs with labels: 
<pre class="lang-html highlight"><c- p>&lt;</c-><c- f>ul</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>>&lt;</c-><c- f>label</c-><c- p>></c->Name:<c- p>&lt;/</c-><c- f>label</c-><c- p>></c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>fn</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>>&lt;</c-><c- f>label</c-><c- p>></c->Address:<c- p>&lt;/</c-><c- f>label</c-><c- p>></c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>address</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>li</c-><c- p>>&lt;</c-><c- f>label</c-><c- p>></c->Phone:<c- p>&lt;/</c-><c- f>label</c-><c- p>></c-> <c- p>&lt;</c-><c- f>input</c-> <c- e>name</c-><c- o>=</c-><c- s>phone</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>ul</c-><c- p>></c->
</pre>
    <p>We want the labels and inputs to align, and we want to style each list item with a border.
		This can be accomplished with subgrid layout:</p>
<pre>ul {
  display: grid;
  grid: auto-flow / auto 1fr;
}
li {
  grid-column: span 2;
  display: grid;
  grid-template-columns: subgrid;
  border: solid;
}
label {
  grid-column: 1;
}
input {
  grid-column: 2;
}
</pre>
   </div>
   <h3 class="heading settled" data-level="2.1" id="subgrid-per-axis"><span class="secno">2.1. </span><span class="content"> Establishing a Subgrid</span><a class="self-link" href="#subgrid-per-axis"></a></h3>
   <p><a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid①">Subgrids</a> provide the ability to pass grid parameters down through nested elements,
	and content-based sizing information back up to their parent grid.</p>
   <table class="def propdef partial" data-link-for-hint="grid-template-rows">
    <tbody>
     <tr>
      <th>Name:
      <td><a class="css" data-link-type="property" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows" id="ref-for-propdef-grid-template-rows">grid-template-rows</a>, <a class="css" data-link-type="property" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns" id="ref-for-propdef-grid-template-columns">grid-template-columns</a>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">New values:</a>
      <td class="prod">subgrid <a class="production css" data-link-type="type" href="#typedef-line-name-list" id="ref-for-typedef-line-name-list">&lt;line-name-list></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> 
     <tr>
      <th>New computed values:
      <td>The <a class="css" data-link-type="maybe" href="#valdef-grid-template-rows-subgrid" id="ref-for-valdef-grid-template-rows-subgrid">subgrid</a> keyword followed by a <a class="production css" data-link-type="type" href="#typedef-line-name-list" id="ref-for-typedef-line-name-list①">&lt;line-name-list></a>. 
   </table>
   <dl>
    <dt><dfn class="css" data-dfn-for="grid-template-rows, grid-template-columns" data-dfn-type="value" data-export id="subgrid-listing">subgrid <a class="production css" data-link-type="type" href="#typedef-line-name-list" id="ref-for-typedef-line-name-list②">&lt;line-name-list></a>?<a class="self-link" href="#subgrid-listing"></a></dfn> 
    <dd>
      The <dfn class="dfn-paneled css" data-dfn-for="grid-template-rows, grid-template-columns" data-dfn-type="value" data-export id="valdef-grid-template-rows-subgrid">subgrid</dfn> value
			indicates that the grid will adopt the spanned portion of its parent grid in that axis.
			Rather than being specified explicitly,
			the sizes of the grid rows/columns
			will be taken from the parent grid’s definition,
			and the <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid②">subgrid</a>’s items will participate
			in the <a href="https://www.w3.org/TR/css-grid-1/#algo-content">intrinsic size calculations</a> (<a href="https://www.w3.org/TR/css-grid-1/#algo-content">CSS Grid Layout 1 §11.5 Resolve Intrinsic Track Sizes</a>)
			of any tracks shared with the parent grid. 
     <p>The <a class="production css" data-link-type="type" href="#typedef-line-name-list" id="ref-for-typedef-line-name-list③">&lt;line-name-list></a> argument allows local naming of the grid lines propagated from the parent grid:
			if a <span class="production" id="ref-for-typedef-line-name-list④">&lt;line-name-list></span> is given,
			the specified <a class="production css" data-link-type="type" href="#typedef-line-names" id="ref-for-typedef-line-names">&lt;line-names></a>s are assigned to the subgrid’s <a data-link-type="dfn">explicit grid lines</a>,
			one per line, starting with line 1.
			Excess <span class="production" id="ref-for-typedef-line-names①">&lt;line-names></span> are ignored.</p>
     <p>If there is no parent grid,
			this value is equivalent to
			the initial value, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-grid-1/#valdef-grid-template-rows-none" id="ref-for-valdef-grid-template-rows-none">none</a>.</p>
   </dl>
   <p>Unlike those of a regular nested grid,
	a subgrid’s contents participate in its parent <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-formatting-context" id="ref-for-grid-formatting-context">grid formatting context</a>;
	thus a subgrid does not establish an <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#independent-formatting-context" id="ref-for-independent-formatting-context">independent formatting context</a>.</p>
   <p>The syntax of <a class="production css" data-link-type="type" href="#typedef-line-name-list" id="ref-for-typedef-line-name-list⑤">&lt;line-name-list></a> is defined as follows:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-line-name-list">&lt;line-name-list></dfn> = [ <a class="production" data-link-type="type" href="#typedef-line-names" id="ref-for-typedef-line-names②">&lt;line-names></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production" data-link-type="type" href="#typedef-name-repeat" id="ref-for-typedef-name-repeat">&lt;name-repeat></a> ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-one-plus" id="ref-for-mult-one-plus">+</a>
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-line-names">&lt;line-names></dfn>     = '[' <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#identifier-value" id="ref-for-identifier-value">&lt;custom-ident></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-zero-plus" id="ref-for-mult-zero-plus">*</a> ']'
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-name-repeat">&lt;name-repeat></dfn>    = repeat( [ <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#integer-value" id="ref-for-integer-value">&lt;integer [1,∞]></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> auto-fill ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-comma" id="ref-for-comb-comma">,</a> <a class="production" data-link-type="type" href="#typedef-line-names" id="ref-for-typedef-line-names③">&lt;line-names></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-one-plus" id="ref-for-mult-one-plus①">+</a>)
</pre>
   <p>The <a class="production css" data-link-type="type" href="#typedef-name-repeat" id="ref-for-typedef-name-repeat①">&lt;name-repeat></a> variant of the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-grid-1/#funcdef-repeat" id="ref-for-funcdef-repeat">repeat()</a> notation
	can only be used with the <a class="css" data-link-type="maybe" href="#valdef-grid-template-rows-subgrid" id="ref-for-valdef-grid-template-rows-subgrid①">subgrid</a> keyword:
	it only repeats names.
	The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fill" id="ref-for-valdef-repeat-auto-fill">auto-fill</a> keyword is only valid once per <a class="production css" data-link-type="type" href="#typedef-line-name-list" id="ref-for-typedef-line-name-list⑥">&lt;line-name-list></a>,
	and repeats enough times for the name list to match the subgrid’s specified <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-span" id="ref-for-grid-span">grid span</a> (falling back to 0 if the span is already fulfilled).</p>
   <h3 class="heading settled" data-level="2.2" id="subgrid-items"><span class="secno">2.2. </span><span class="content"> Characteristics of a Subgrid Item</span><a class="self-link" href="#subgrid-items"></a></h3>
   <p>A <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid③">subgrid</a> behaves just like a normal <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container④">grid container</a> except that:</p>
   <ul style="list-style-type: lower-alpha">
    <li id="subgrid-tracks"><a class="self-link" href="#subgrid-tracks"></a> Placing the <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid④">subgrid</a> creates a correspondence between its subgridded tracks
			and those that it spans in its parent grid.
			The grid lines thus shared between the subgrid and its parent
			form the subgrid’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#explicit-grid" id="ref-for-explicit-grid">explicit grid</a>,
			and its track sizes are governed by the parent grid. 
    <li id="subgrid-span">
     <a class="self-link" href="#subgrid-span"></a> The number of explicit tracks in the <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid⑤">subgrid</a> in a subgridded dimension
			always corresponds to the number of <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-track" id="ref-for-grid-track">grid tracks</a> that it spans in its parent <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid" id="ref-for-grid①">grid</a>: 
     <ul>
      <li> If the <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid⑥">subgrid</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-span" id="ref-for-grid-span①">grid span</a> in the subgridded dimension is definite,
					then the number of explicit tracks in each subgridded dimension
					is taken from its used <span id="ref-for-grid-span②">grid span</span> in that dimension
					(regardless of its <a class="property" data-link-type="propdesc">grid-template-*</a> properties). 
      <li> If it has an <a data-link-type="dfn">indefinite grid span</a> (i.e. either the <span class="property">-start</span> or <span class="property">-end</span> value
					of its <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-placement-property" id="ref-for-grid-placement-property">grid-placement properties</a> in the subgridded axis
					is <span class="css">auto</span>)
					then its used <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-span" id="ref-for-grid-span③">grid span</a> is taken
					from the number of explicit tracks specified for that axis
					by its <span class="property">grid-template-*</span> properties,
					floored at one. 
     </ul>
    <li id="subgrid-indexing">
     <a class="self-link" href="#subgrid-indexing"></a> The <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-placement-property" id="ref-for-grid-placement-property①">grid-placement properties</a> of the <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid⑦">subgrid</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item④">grid items</a> and the line numbers they use
			are scoped to the lines covered by the subgrid,
			exactly consistent with the lines outside the subgrid
			being excluded from its <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#explicit-grid" id="ref-for-explicit-grid①">explicit grid</a>.
			E.g. numeric indices count starting from the first line of the subgrid
			rather than the first line of the parent grid. 
     <p>Line numbering and placement rules
			obey the subgrid’s own <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode" id="ref-for-writing-mode">writing mode</a>,
			just as they would for a nested independent grid.</p>
    <li id="subgrid-line-name-inheritance">
     <a class="self-link" href="#subgrid-line-name-inheritance"></a> Since <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid⑧">subgrids</a> can be placed before their contents are placed,
			the subgridded lines
			automatically receive the explicit line names
			specified on the corresponding lines of the parent <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid" id="ref-for-grid②">grid</a>. 
     <p>These names are in <em>addition</em> to
			any line names specified locally on the subgrid.</p>
    <li id="subgrid-area-inheritance">
     <a class="self-link" href="#subgrid-area-inheritance"></a> When a <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid⑨">subgrid</a> overlaps a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#named-grid-area" id="ref-for-named-grid-area">named grid area</a> in its parent
			that was created by a <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas" id="ref-for-propdef-grid-template-areas">grid-template-areas</a> property declaration, <a data-link-type="dfn">implicit line names</a> are assigned
			to represent the parent’s <span id="ref-for-named-grid-area①">named grid area</span> within the <span id="ref-for-subgrid①⓪">subgrid</span>. 
     <p class="note" role="note"><span>Note:</span> If a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#named-grid-area" id="ref-for-named-grid-area②">named grid area</a> only partially overlaps the <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid①①">subgrid</a>,
			its <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#implicit-named-line" id="ref-for-implicit-named-line">implicit names</a> will be assigned
			to the first and/or last line of the <span id="ref-for-subgrid①②">subgrid</span> such that a <span id="ref-for-named-grid-area③">named grid area</span> exists
			representing that partially overlapped area of the <span id="ref-for-subgrid①③">subgrid</span>;
			thus the <span id="ref-for-implicit-named-line①">implicit named lines</span> of the <span id="ref-for-subgrid①④">subgrid</span> might not always correspond exactly
			to the <span id="ref-for-implicit-named-line②">implicit named lines</span> of the parent <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid" id="ref-for-grid③">grid</a>.</p>
     <p>These names are also in <em>addition</em> to
			any line names specified locally on the subgrid.</p>
     <div class="example" id="example-0456b42e">
      <a class="self-link" href="#example-0456b42e"></a> In the following example,
				the 4-column grand-parent grid has both explicit line names
				and implicit ones generated by <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas" id="ref-for-propdef-grid-template-areas①">grid-template-areas</a>: 
<pre>&lt;style type="css">
  .outer {
    display: grid;
    grid-template-columns:
      [outer-edge] 20px [main-start] 1fr [center] 1fr max-content [main-end];
    grid-template-areas:
      "gutter info info photos";
  }
  .middle {
    grid-column: main-start / main-end;
    display: grid;
    grid: subgrid / subgrid;
  }
  .inner {
    grid-column: center / -1;
    display: grid;
    grid: subgrid / subgrid;
  }
&lt;/style>

&lt;div class="outer">
  &lt;div class="middle">
    &lt;div class="inner">&amp;hellip;&lt;/div>
  &lt;/div>
&lt;/div>
</pre>
      <p>After all types of name resolution,
				the names for each grid will be:</p>
<pre>.outer = [outer-edge gutter-start] [gutter-end info-start main-start] [center] [info-end photos-start] [main-end photos-end]
.middle = [info-start main-start] [center] [info-end photos-start] [main-end photos-end]
.inner = [center info-start] [info-end photos-start] [main-end photos-end]
</pre>
      <p>Notice that all the explicit names inherit straight through to .inner,
				but the implicit names are calculated based on
				each subgrid’s overlap of the original <a data-link-type="dfn">named area</a>.</p>
     </div>
    <li id="subgrid-implicit">
     <a class="self-link" href="#subgrid-implicit"></a> The <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid①⑤">subgrid</a> does not have any <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#implicit-grid-track" id="ref-for-implicit-grid-track">implicit grid tracks</a> in the subgridded dimension(s).
			Hypothetical <a data-link-type="dfn">implicit grid lines</a> are used to resolve placement
			as usual when the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#explicit-grid" id="ref-for-explicit-grid②">explicit grid</a> does not have enough lines;
			however
			each <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item⑤">grid item</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-area" id="ref-for-grid-area">grid area</a> is <span>clamped</span> to the subgrid’s <span id="ref-for-explicit-grid③">explicit grid</span> (using the same procedure as for clamping placement in an overly-large grid). 
     <div class="example" id="example-f40fdc9d"><a class="self-link" href="#example-f40fdc9d"></a> For example, if a <span class="css">span 1</span> subgrid has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item⑥">grid item</a> with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-column" id="ref-for-propdef-grid-column">grid-column: 2 / span 3;</a>,
				then that item is instead forced into (and limited to) the first (only) track in the subgrid. </div>
    <li id="subgrid-size-contribution"><a class="self-link" href="#subgrid-size-contribution"></a> The <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid①⑥">subgrid</a> itself lays out as an ordinary <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item⑦">grid item</a> in its parent grid,
			but acts as if it was completely empty for track sizing purposes
			in the subgridded dimension. 
    <li id="subgrid-item-contribution">
     <a class="self-link" href="#subgrid-item-contribution"></a> The <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid①⑦">subgrid</a>’s own <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item⑧">grid items</a> participate
			in the sizing of its parent grid in the subgridded dimension(s)
			and are aligned to it in those dimensions. 
     <p id="subgrid-margins"> In this process, the sum of the <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid①⑧">subgrid</a>’s
			margin, padding, and borders at each edge
			are applied as an extra layer of (potentially negative) margin
			to the items at those edges.
			This extra layer of “margin” accumulates
			through multiple levels of subgrids. </p>
     <div class="example" id="example-edd2713b">
      <a class="self-link" href="#example-edd2713b"></a> For example, if we have a 3×3 grid with the following tracks: 
<pre>#parent-grid { grid-template-columns: 300px auto 300px; }</pre>
      <p>If a subgrid covers the last two tracks,
				its first two columns correspond to the parent grid’s last two columns,
				and any items positioned into those tracks participate in sizing the parent grid.
				Specifically, an item positioned in the first track of the subgrid
				influences the auto-sizing of the parent grid’s middle track.</p>
<pre>#subgrid { grid-column: 2 / span 2; } /* cover parent’s 2nd and 3rd tracks */
#subgrid > :first-child { grid-column: 1; } /* subgrid’s 1st track, parent grid’s 2nd track */
</pre>
      <p>If the subgrid has margins/borders/padding,
				the size of those margins/borders/padding also influences sizing.
				For example, if the subgrid has 100px padding:</p>
<pre>#subgrid { padding: 100px; }</pre>
      <p>Then a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item⑨">grid item</a> in the <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid①⑨">subgrid’s</a> first track
				acts as if it has an additional <span class="css">100px</span> of top, left, and bottom margin,
				influencing the sizing of the parent grid’s tracks
				and the <span id="ref-for-grid-item①⓪">grid item’s</span> own position.</p>
     </div>
     <p id="subgrid-gaps"> Meanwhile,
			half the size of the difference between
			the subgrid’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#gutter" id="ref-for-gutter">gutters</a> (<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-row-gap" id="ref-for-propdef-row-gap">row-gap</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-column-gap" id="ref-for-propdef-column-gap">column-gap</a>)
			and its parent grid’s <span id="ref-for-gutter①">gutters</span> is applied as an extra layer of (potentially negative) margin
			to the items not at those edges.
			This extra layer of “margin” also accumulates
			through multiple levels of subgrids.
			A value of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-row-gap-normal" id="ref-for-valdef-row-gap-normal">normal</a> indicates that the subgrid has the same size <span id="ref-for-gutter②">gutters</span> as its parent grid,
			i.e. the applied difference is zero. </p>
     <p class="note" role="note"><span>Note:</span> The end result will be that the parent’s grid tracks
			will be sized as specified,
			and that the subgrid’s gaps will visually center-align
			with the parent grid’s gaps.</p>
     <div class="example" id="example-4627a772">
      <a class="self-link" href="#example-4627a772"></a> 
      <p>For example,
				suppose we have a 300px-wide outer grid
				with 50px gaps
				and its columns specified as <span class="css">100px 1fr</span>.
				A subgrid spanning both tracks would have… </p>
      <dl>
       <dt>… if its <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-column-gap" id="ref-for-propdef-column-gap①">column-gap</a> were <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-row-gap-normal" id="ref-for-valdef-row-gap-normal①">normal</a> (or <span class="css">50px</span>): 
       <dd>
        <ul>
         <li>A grid item in its left column
								sized and laid out
								(and contributing its size to the parent grid’s sizing calculations)
								without any special adjustment,
								thus stretching to 100px wide
								while remaining aligned
								to the subgrid’s left edge. 
         <li>A grid item in its right column
								sized and laid out
								(and contributing its size to the parent grid’s sizing calculations)
								without any special adjustment,
								thus stretching to 150px wide,
								while remaining aligned
								to the subgrid’s right edge. 
         <li>An effective visual <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#gutter" id="ref-for-gutter③">gutter</a> between the items
								of 50px, exactly matching its parent grid. 
        </ul>
        <p><img alt src="images/subgrid-gap-normal.png"></p>
       <dt>… if its <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-column-gap" id="ref-for-propdef-column-gap②">column-gap</a> were <span class="css">0</span>: 
       <dd>
        <ul>
         <li>A grid item in its left column
								sized and laid out
								(and contributing its size to the parent grid’s sizing calculations)
								as if it had a -25px right margin,
								thus stretching to 125px wide
								while remaining aligned
								to the subgrid’s left edge. 
         <li>A grid item in its right column
								sized and laid out
								(and contributing its size to the parent grid’s sizing calculations)
								as if it had a -25px left margin,
								thus stretching to 175px wide,
								while remaining aligned
								to the subgrid’s right edge. 
         <li>An effective visual <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#gutter" id="ref-for-gutter④">gutter</a> between the items
								of zero, as specified by its <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-column-gap" id="ref-for-propdef-column-gap③">column-gap</a>. 
        </ul>
        <p><img alt src="images/subgrid-gap-0px.png"></p>
       <dt>… if its <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-column-gap" id="ref-for-propdef-column-gap④">column-gap</a> were <span class="css">25px</span>: 
       <dd>
        <ul>
         <li>A grid item in its left column
								sized and laid out
								(and contributing its size to the parent grid’s sizing calculations)
								as if it had a -12.5px right margin,
								thus stretching to 112.5px wide
								while remaining aligned
								to the subgrid’s left edge. 
         <li>A grid item in its right column
								sized and laid out
								(and contributing its size to the parent grid’s sizing calculations)
								as if it had a -12.5px left margin,
								thus stretching to 162.5px wide,
								while remaining aligned
								to the subgrid’s right edge. 
         <li>An effective visual <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#gutter" id="ref-for-gutter⑤">gutter</a> between the items
								of 25px, as specified by its <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-column-gap" id="ref-for-propdef-column-gap⑤">column-gap</a>. 
        </ul>
        <p><img alt src="images/subgrid-gap-25px.png"></p>
       <dt>… if its <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-column-gap" id="ref-for-propdef-column-gap⑥">column-gap</a> were <span class="css">75px</span>: 
       <dd>
        <ul>
         <li>A grid item in its left column
								sized and laid out
								(and contributing its size to the parent grid’s sizing calculations)
								as if it had a 12.5px right margin,
								thus stretching to 87.5px wide
								while remaining aligned
								to the subgrid’s left edge. 
         <li>A grid item in its right column
								sized and laid out
								(and contributing its size to the parent grid’s sizing calculations)
								as if it had a 12.5px left margin,
								thus stretching to 137.5px wide,
								while remaining aligned
								to the subgrid’s right edge. 
         <li>An effective visual <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#gutter" id="ref-for-gutter⑥">gutter</a> between the items
								of 75px, as specified by its <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-column-gap" id="ref-for-propdef-column-gap⑦">column-gap</a>. 
        </ul>
        <p><img alt src="images/subgrid-gap-75px.png"></p>
      </dl>
     </div>
    <li id="subgrid-edge-placeholders">
     <a class="self-link" href="#subgrid-edge-placeholders"></a> For each edge of a non-empty subgrid,
			to account for the subgrid’s margin/border/padding at that edge,
			a hypothetical item is contributed to the track sizing algorithm
			for each span size
			in the set of items spanning into
			the occupied track closest to that edge of the subgrid.
			This item’s sizes are taken from the sizes of the largest such item
			of each span size,
			and are additionally inflated by the subgrid’s own margin/border/padding
			at that edge (or both edges,
			if it happens to be the most extreme item on both sides
			and is also the smallest span size).
			Similarly, the hypothetical item’s span is taken
			from that same real item’s span,
			and inflated by the number of empty tracks between it
			and the relevant subgrid’s edge(s). 
     <p class="note" role="note"><span>Note:</span> This step can be shortcut if
			the tracks closest to the subgrid’s edges contain real items,
			which would have already <a href="#subgrid-item-contribution">accounted for the subgrid’s margin/border/padding</a> as described above.</p>
     <div class="example" id="example-6291cdd6">
      <a class="self-link" href="#example-6291cdd6"></a> For example, in the following subgrid layout: 
<pre>5px auto auto 5px
.   aaaaaaaaa .
.   bbbb cccc .
</pre>
      <p>Assuming subgrid items <var>a</var>, <var>b</var>, and <var>c</var> occupying their corresponding grid areas
				and a subgrid padding of 25px,
				two hypothetical grid items would be contributed
				to the track sizing algorithm
				for the purpose of handling the subgrid’s inline-start padding:
				one with the size of <var>b</var> plus 25px,
				spanning the first two columns;
				and one with the size of <var>a</var> plus 25px,
				spanning the first three columns.</p>
      <p>If only item <var>a</var> existed,
				which would make it both
				span into the closest occupied columns on both sides
				and be the smallest-spanning item on each side,
				then the hypothetical item it contributes
				would be its size inflated by 50px
				and would span all four columns.</p>
     </div>
    <li id="subgrid-box-alignment"><a class="self-link" href="#subgrid-box-alignment"></a> The <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid②⓪">subgrid</a> is always stretched in its subgridded dimension(s:
			the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-self" id="ref-for-propdef-align-self">align-self</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self" id="ref-for-propdef-justify-self">justify-self</a> properties on it are ignored,
			as are any specified width/height constraints. 
    <li id="subgrid-grid-alignment"><a class="self-link" href="#subgrid-grid-alignment"></a> Layoutwise, the <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid②①">subgrid</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid" id="ref-for-grid④">grid</a> is always aligned with the corresponding section of the parent <span id="ref-for-grid⑤">grid</span>;
			the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content">align-content</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" id="ref-for-propdef-justify-content">justify-content</a> properties on it are also ignored
			in the subgridded dimension. 
    <li id="subgrid-overflow"><a class="self-link" href="#subgrid-overflow"></a> The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow</a> property does apply to <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid②②">subgrids</a>,
			so that overflowing contents of the subgrid can be scrolled into view.
			(Note: the act of scrolling does not affect layout.) 
   </ul>
   <h3 class="heading settled" data-level="2.3" id="resolved-track-list"><span class="secno">2.3. </span><span class="content"> Resolved Value of a Track Listing</span><a class="self-link" href="#resolved-track-list"></a></h3>
   <p>When an element generates a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container⑤">grid container</a> box that is a <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid②③">subgrid</a>,
	the <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#resolved-value" id="ref-for-resolved-value">resolved value</a> of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows" id="ref-for-propdef-grid-template-rows①">grid-template-rows</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns" id="ref-for-propdef-grid-template-columns①">grid-template-columns</a> properties
	represents the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#used-value" id="ref-for-used-value">used</a> number of columns,
	serialized as the <a class="css" data-link-type="maybe" href="#valdef-grid-template-rows-subgrid" id="ref-for-valdef-grid-template-rows-subgrid②">subgrid</a> keyword
	followed by a list representing each of its lines
	as a <a data-link-type="dfn">line name set</a> of all the line’s names
	explicitly defined on the subgrid
	(not including those adopted from the parent grid),
	without using the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-grid-1/#funcdef-repeat" id="ref-for-funcdef-repeat①">repeat()</a> notation.</p>
   <div class="example" id="example-8cc1f771">
    <a class="self-link" href="#example-8cc1f771"></a> For example,
		when applied to a <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid②④">subgrid</a> with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-column" id="ref-for-propdef-grid-column①">grid-column: span 4</a>,
		each of the following <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns" id="ref-for-propdef-grid-template-columns②">grid-template-columns</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#specified-value" id="ref-for-specified-value">specified values</a> becomes the corresponding <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#resolved-value" id="ref-for-resolved-value①">resolved values</a>: 
<pre class="lang-css highlight">specified: subgrid [a] repeat(auto-fill, [b]) [c]
resolved:  subgrid [a] [b] [b] [b] [c]
</pre>
<pre class="lang-css highlight">specified: subgrid [a] [a] [a] [a] repeat(auto-fill, [b]) [c] [c]
resolved:  subgrid [a] [a] [a] [a] [c]
</pre>
<pre class="lang-css highlight">specified: subgrid [] [a]
resolved:  subgrid [] [a] [] [] []
</pre>
<pre class="lang-css highlight">specified: subgrid [a] [b] [c] [d] [e] [f]
resolved:  subgrid [a] [b] [c] [d] [e]
</pre>
   </div>
   <p class="note" role="note"><span>Note:</span> This violates the general
	"shortest equivalent serialization" principle
	by serializing empty trailing <a data-link-type="dfn">line name sets</a>,
	as the trailing <span>line name sets</span> provide potentially-useful information
	about how many tracks the subgrid is spanning.</p>
   <h3 class="heading settled" data-level="2.4" id="subgrid-sizing"><span class="secno">2.4. </span><span class="content"> Subgrid Sizing Algorithm</span><a class="self-link" href="#subgrid-sizing"></a></h3>
   <p class="note" role="note"><span>Note:</span> Placement of all grid items,
	including subgrids and their sub-items,
	occurs before sizing.</p>
   <p>Track sizing in a subgridded dimension
	treats each item in a given track in that axis
	as members of the parent grid.
	This interlacing requires that grid sizing
	drills down per axis into subgrids,
	rather than completing both axes in its recursion.
	Thus the <a href="https://www.w3.org/TR/css-grid-1/#algo-overview">Grid Sizing Algorithm</a> is modified as follows:</p>
   <blockquote>
    <ol>
     <li>
       First, the <a data-link-type="dfn">track sizing algorithm</a> is used to resolve the sizes of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-column" id="ref-for-grid-column">grid columns</a>. 
      <p>In this process,
			any <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item①①">grid item</a> which is subgridded
			in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container⑥">grid container</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis">inline axis</a> is treated as empty
			and its <span id="ref-for-grid-item①②">grid items</span> (the grandchildren)
			are treated as direct children of the <span id="ref-for-grid-container⑦">grid container</span> (their grandparent).
			This introspection is recursive.</p>
      <p>Items which are subgridded only in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis">block axis</a>,
			and whose <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container⑧">grid container</a> size in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis①">inline axis</a> depends on the size of its contents
			are also introspected:
			since the size of the item in this dimension
			can be dependent on the sizing of its subgridded tracks in the other,
			the size contribution of any such item to this grid’s column sizing
			(see <a href="https://www.w3.org/TR/css-grid-1/#algo-content">Resolve Intrinsic Track Sizes</a>)
			is taken under the provision
			of having determined its track sizing only up to the same point
			in the Grid Sizing Algorithm as this parent grid itself.
			E.g. for the first pass through this step,
			the item will have its tracks sized only through this first step;
			if a second pass of this step is triggered then
			the item will have completed a first pass through steps 1-3
			as well as the second pass of this step
			prior to returning its size for consideration in this grid’s column sizing.
			Again, this introspection is recursive.</p>
      <p>If calculating the layout of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item①③">grid item</a> in this step
			depends on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#available" id="ref-for-available">available space</a> in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis①">block axis</a>,
			assume the <span id="ref-for-available①">available space</span> that it would have
			if any row with a <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#definite" id="ref-for-definite">definite</a> <a data-link-type="dfn">max track sizing function</a> had that size and all other rows were infinite.</p>
     <li>
       Next, the <a data-link-type="dfn">track sizing algorithm</a> resolves the sizes of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-row" id="ref-for-grid-row">grid rows</a>,
			using the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-column" id="ref-for-grid-column①">grid column</a> sizes calculated in the previous step. 
      <p>In this process,
			any <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item①④">grid item</a> which is subgridded
			in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container⑨">grid container</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis②">block axis</a> is treated as empty
			and its <span id="ref-for-grid-item①⑤">grid items</span> (the grandchildren)
			are treated as direct children of the <span id="ref-for-grid-container①⓪">grid container</span> (their grandparent).
			This introspection is recursive.</p>
      <p>As with sizing columns,
			items which are subgridded only in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis" id="ref-for-inline-axis②">inline axis</a>,
			and whose <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container①①">grid container</a> size in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-axis" id="ref-for-block-axis③">block axis</a> depends on the size of its contents
			are also introspected.
			(As with sizing columns,
			the size contribution to this grid’s row sizing
			is taken under the provision
			of having determined its track sizing
			only up to this corresponding point in the algorithm;
			and again, this introspection is recursive.)</p>
     <li>
       Then, if the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#min-content-contribution" id="ref-for-min-content-contribution">min-content contribution</a> of any grid items have changed
			based on the row sizes calculated in step 2,
			steps 1 and 2 are repeated with the new <span id="ref-for-min-content-contribution①">min-content contribution</span> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution" id="ref-for-max-content-contribution">max-content contribution</a> (once only). 
      <div class="note" role="note"> This cycle is necessary for cases where the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#inline-size" id="ref-for-inline-size">inline size</a> of a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item①⑥">grid item</a> depends on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#block-size" id="ref-for-block-size">block size</a> of its <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-area" id="ref-for-grid-area①">grid area</a>.
				Examples include wrapped column <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container">flex containers</a> (<a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-flow" id="ref-for-propdef-flex-flow">flex-flow: column wrap</a>), <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-4/#establish-an-orthogonal-flow" id="ref-for-establish-an-orthogonal-flow">orthogonal flows</a> (<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a>),
				and <a data-link-type="dfn" href="https://drafts.csswg.org/css-multicol-1/#multi-column-container" id="ref-for-multi-column-container">multi-column containers</a>. </div>
     <li>
       Finally, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container①②">grid container</a> is sized
			using the resulting size of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid" id="ref-for-grid⑥">grid</a> as its content size,
			and the tracks are aligned within the <span id="ref-for-grid-container①③">grid container</span> according to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content①">align-content</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" id="ref-for-propdef-justify-content①">justify-content</a> properties. 
      <p class="note" role="note"><span>Note:</span> This can introduce extra space between tracks,
			potentially enlarging the grid area of any grid items spanning the gaps
			beyond the space allotted to during track sizing.</p>
    </ol>
    <p>Once the size of each <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-area" id="ref-for-grid-area②">grid area</a> is thus established,
	the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-item" id="ref-for-grid-item①⑦">grid items</a> are laid out into their respective containing blocks.
	The <span id="ref-for-grid-area③">grid area’s</span> width and height are considered <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#definite" id="ref-for-definite①">definite</a> for this purpose.</p>
    <p class="note" role="note"><span>Note:</span> Since formulas calculated using only definite sizes,
	such as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-sizing-3/#stretch-fit" id="ref-for-stretch-fit">stretch fit</a> formula,
	are also definite,
	the size of a grid item which is stretched
	is also considered definite.</p>
   </blockquote>
   <p class="issue" id="issue-28e6e962"><a class="self-link" href="#issue-28e6e962"></a> Note, this means that a subgrid establishing an orthogonal flow
	would have the order of its track sizing inverted compared to a nested grid.
	We could simplify this by saying that an orthogonal flow
	cannot establish a subgrid; it can only be a nested grid.</p>
   <div class="example" id="example-c45a7148">
    <a class="self-link" href="#example-c45a7148"></a> The following example illustrates how per-axis subgrids are sized: 
    <p>Suppose we have a parent grid container <var>A</var> which contains an item <var>B</var> that has subgridded columns
		and contains a grandchild <var>B</var> that has subgridded rows
		and grandchild <var>D</var> that is simply a nested grid.</p>
<pre>&lt;grid-A>
  &lt;grid-B subgrid=columns>
    &lt;grid-C subgrid=rows/>
    &lt;grid-D>
  &lt;/grid-B>
&lt;grid-A>
</pre>
    <p>When <var>A</var> sizes its columns
		it treats <var>B</var>’s items
		as slotted into to <var>A</var>’s corresponding columns,
		but when <var>A</var> sizes its rows
		it treats <var>B</var> as a single item
		(a grid container with its own rows and some items including items <var>C</var> and <var>D</var>).
		Similarly when <var>B</var> sizes its rows,
		it treats <var>C</var>’s items as slotted into <var>B</var>’s rows,
		but when <var>B</var> sizes its columns,
		it treats <var>C</var> as a single item,
		just as it does with <var>D</var>.
		There is no relationship between <var>C</var>’s rows and <var>A</var>’s rows,
		because the rows in <var>B</var> are nested, not subgridded.</p>
    <p>At a high level, the grid algorithm is:</p>
    <ol>
     <li>Size the columns 
     <li>Size the rows 
     <li>Adjust the columns (if needed based on final row sizes) 
    </ol>
    <p>The grid sizing algorithm in this example would thus look like this:</p>
    <ol>
     <li>
       <strong>Resolve sizes of <var>A</var>’s grid columns,
				using the sizes of <var>A</var>’s grid items,
				treating <var>B</var> as empty
				but treating its children
				(including <var>C</var> and <var>D</var>)
				as items in grid <var>A</var>.</strong> 
      <p>The grid algorithm simply recurses into <var>D</var>.
				For <var>C</var>, it’s more complicated:</p>
      <ol>
       <li>Size <var>C</var>’s columns. 
       <li>Size <var>C</var>’s rows by sizing <var>B</var>’s rows. 
       <li>Adjust <var>C</var>’s columns. 
       <li>Return <var>C</var>’s final column sizes. 
      </ol>
      <p>A correct size for <var>B</var>’s rows
				requires <var>C</var>’s final column sizes,
				because the row size depends on the column size,
				and thus <var>B</var>’s rows could very well depend
				on <var>C</var>’s final column sizes.
				To break this cyclic dependency,
				we need to split the algorithm to depend on
				the initial approximation of <var>C</var>’s final column sizes,
				and do the adjustment pass later.
				So for <var>C</var>, we need to recurse into column sizing only,
				and pass that initial size up to <var>A</var> for its initial column sizing.</p>
      <p>When we size <var>B</var>’s rows later on,
				we will size <var>C</var>’s rows (which are subgridded),
				and finish up <var>C</var>’s sizing by finalizing its columns.
				If this resulted in a change, we have the opportunity
				to trigger an adjustment pass for <var>A</var>’s columns
				during its adjustment pass.</p>
     <li>
       <strong>Next, resolve sizes of <var>A</var>’s rows,
				using the sizes of <var>A</var>’s grid items,
				treating <var>B</var> as a single item.</strong> 
      <p>Since <var>B</var>, as a subgrid,
				has its sizing is split out into the multiple passes,
				the grid algorithm issues only a row-sizing recursion into <var>B</var>:
				Size <var>B</var>’s rows, treating D as a single item, requesting its final size,
				and treating <var>C</var> as an empty item
				and hoisting its children as items into grid <var>B</var>.</p>
      <p><var>B</var> returns its final row size,
				which factors into <var>A</var>’s row sizing pass.</p>
     <li> <strong>Last, finalize <var>A</var>’s column sizes.</strong> If <var>C</var>’s final size changes
				as a result of the row-sizing pass through <var>B</var>,
				this should trigger a resizing of <var>B</var>’s columns,
				which should trigger a resizing pass on <var>A</var>’s column. 
    </ol>
   </div>
   <h2 class="heading settled" data-level="3" id="changes"><span class="secno">3. </span><span class="content"> Changes</span><a class="self-link" href="#changes"></a></h2>
   <h3 class="no-num heading settled" id="changes-20180904"><span class="content"> Changes since the <a href="https://www.w3.org/TR/2018/WD-css-grid-2-20180804/">August 2018
	CSS Grid Layout Level 2 Working Draft</a></span><a class="self-link" href="#changes-20180904"></a></h3>
   <ul>
    <li>Adjusted the interaction of <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#implicit-named-line" id="ref-for-implicit-named-line③">implicit named lines</a> to be smarter about partially-overlapped areas. (<a href="https://github.com/w3c/csswg-drafts/issues/4411">Issue 4411</a>) 
    <li>Defined <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-1/#resolved-value" id="ref-for-resolved-value②">resolved value</a> of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows" id="ref-for-propdef-grid-template-rows②">grid-template-rows</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns" id="ref-for-propdef-grid-template-columns③">grid-template-columns</a> for <a data-link-type="dfn" href="#subgrid" id="ref-for-subgrid②⑤">subgrids</a>. 
    <li>Removed the aspect-ratio-controlled gutters feature (which will be moved to CSS Box Alignment Level 4 instead). 
   </ul>
   <h3 class="no-num heading settled" id="changes-20180628"><span class="content"> Changes since the <a href="https://www.w3.org/TR/2018/WD-css-grid-2-20180628/">June 2018
	CSS Grid Layout Level 2 Working Draft</a></span><a class="self-link" href="#changes-20180628"></a></h3>
   <ul>
    <li>Defined handling of the subgrid’s margins/borders/padding
		when the track closest to its edge is empty.
		(<a href="https://github.com/w3c/csswg-drafts/issues/2592">Issue 2592</a>) 
    <li>Defined that subgrids with an automatic span
		use the number of explicit tracks from their <a class="property" data-link-type="propdesc">grid-template-*</a> properties
		rather than defaulting to one.
		(<a href="https://github.com/w3c/csswg-drafts/issues/2565">Issue 2565</a> 
   </ul>
   <h3 class="no-num heading settled" id="changes-20180427"><span class="content"> Changes since the <a href="https://www.w3.org/TR/2018/WD-css-grid-2-20180427/">April 2018
	CSS Grid Layout Level 2 Working Draft</a></span><a class="self-link" href="#changes-20180427"></a></h3>
   <ul>
    <li>Added back syntax for specifying subgrid-local line names. 
    <li>Defined that subgrid’s own gap properties are honored, and how exactly that works. 
    <li>Clarified interactions of parent line names and subgrid line names. 
   </ul>
   <h2 class="heading settled" data-level="4" id="acknowledgements"><span class="secno">4. </span><span class="content"> Acknowledgements</span><a class="self-link" href="#acknowledgements"></a></h2>
   <p>Many thanks to Mats Palmgren of Mozilla,
	without whose support and feedback the subgrid feature
	would not be able to move forward.
	Thanks also to Daniel Tonon,
	who insisted on intelligent handling of gaps in subgrids
	and contributed illustrations;
	and Rachel Andrew and Jen Simmons
	who helped bridge the feedback gap between the CSS Working Group
	and the Web design/authoring community.</p>
   <p>Lastly,
	the acknowledgements section of CSS Grid Level 2
	would be incomplete without acknowledgement
	of everyone who made the monumental task of <a href="https://www.w3.org/TR/css-grid-1/">CSS Grid Level 1</a> possible.</p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#typedef-line-name-list">&lt;line-name-list></a><span>, in §2.1</span>
   <li><a href="#typedef-line-names">&lt;line-names></a><span>, in §2.1</span>
   <li><a href="#typedef-name-repeat">&lt;name-repeat></a><span>, in §2.1</span>
   <li>
    subgrid
    <ul>
     <li><a href="#subgrid">definition of</a><span>, in §2</span>
     <li><a href="#valdef-grid-template-rows-subgrid">value for grid-template-rows, grid-template-columns</a><span>, in §2.1</span>
    </ul>
   <li><a href="#subgrid-listing">subgrid &lt;line-name-list>?</a><span>, in §2.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-align-content">
   <a href="https://drafts.csswg.org/css-align-3/#propdef-align-content">https://drafts.csswg.org/css-align-3/#propdef-align-content</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-align-content">2.2. 
Characteristics of a Subgrid Item</a>
    <li><a href="#ref-for-propdef-align-content①">2.4. 
Subgrid Sizing Algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-align-self">
   <a href="https://drafts.csswg.org/css-align-3/#propdef-align-self">https://drafts.csswg.org/css-align-3/#propdef-align-self</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-align-self">2.2. 
Characteristics of a Subgrid Item</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-column-gap">
   <a href="https://drafts.csswg.org/css-align-3/#propdef-column-gap">https://drafts.csswg.org/css-align-3/#propdef-column-gap</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-column-gap">2.2. 
Characteristics of a Subgrid Item</a> <a href="#ref-for-propdef-column-gap①">(2)</a> <a href="#ref-for-propdef-column-gap②">(3)</a> <a href="#ref-for-propdef-column-gap③">(4)</a> <a href="#ref-for-propdef-column-gap④">(5)</a> <a href="#ref-for-propdef-column-gap⑤">(6)</a> <a href="#ref-for-propdef-column-gap⑥">(7)</a> <a href="#ref-for-propdef-column-gap⑦">(8)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-gutter">
   <a href="https://drafts.csswg.org/css-align-3/#gutter">https://drafts.csswg.org/css-align-3/#gutter</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-gutter">2.2. 
Characteristics of a Subgrid Item</a> <a href="#ref-for-gutter①">(2)</a> <a href="#ref-for-gutter②">(3)</a> <a href="#ref-for-gutter③">(4)</a> <a href="#ref-for-gutter④">(5)</a> <a href="#ref-for-gutter⑤">(6)</a> <a href="#ref-for-gutter⑥">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-justify-content">
   <a href="https://drafts.csswg.org/css-align-3/#propdef-justify-content">https://drafts.csswg.org/css-align-3/#propdef-justify-content</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-justify-content">2.2. 
Characteristics of a Subgrid Item</a>
    <li><a href="#ref-for-propdef-justify-content①">2.4. 
Subgrid Sizing Algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-justify-self">
   <a href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">https://drafts.csswg.org/css-align-3/#propdef-justify-self</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-justify-self">2.2. 
Characteristics of a Subgrid Item</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-row-gap-normal">
   <a href="https://drafts.csswg.org/css-align-3/#valdef-row-gap-normal">https://drafts.csswg.org/css-align-3/#valdef-row-gap-normal</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-row-gap-normal">2.2. 
Characteristics of a Subgrid Item</a> <a href="#ref-for-valdef-row-gap-normal①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-row-gap">
   <a href="https://drafts.csswg.org/css-align-3/#propdef-row-gap">https://drafts.csswg.org/css-align-3/#propdef-row-gap</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-row-gap">2.2. 
Characteristics of a Subgrid Item</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-specified-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#specified-value">https://drafts.csswg.org/css-cascade-4/#specified-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-specified-value">2.3. 
Resolved Value of a Track Listing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-used-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#used-value">https://drafts.csswg.org/css-cascade-4/#used-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-used-value">2.3. 
Resolved Value of a Track Listing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-display">
   <a href="https://drafts.csswg.org/css-display-3/#propdef-display">https://drafts.csswg.org/css-display-3/#propdef-display</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-display">2. 
Subgrids</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-independent-formatting-context">
   <a href="https://drafts.csswg.org/css-display-3/#independent-formatting-context">https://drafts.csswg.org/css-display-3/#independent-formatting-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-independent-formatting-context">2.1. 
Establishing a Subgrid</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flex-container">
   <a href="https://drafts.csswg.org/css-flexbox-1/#flex-container">https://drafts.csswg.org/css-flexbox-1/#flex-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flex-container">2.4. 
Subgrid Sizing Algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-flex-flow">
   <a href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex-flow">https://drafts.csswg.org/css-flexbox-1/#propdef-flex-flow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-flex-flow">2.4. 
Subgrid Sizing Algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-repeat-auto-fill">
   <a href="https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fill">https://drafts.csswg.org/css-grid-1/#valdef-repeat-auto-fill</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-repeat-auto-fill">2.1. 
Establishing a Subgrid</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-explicit-grid">
   <a href="https://drafts.csswg.org/css-grid-1/#explicit-grid">https://drafts.csswg.org/css-grid-1/#explicit-grid</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-explicit-grid">2.2. 
Characteristics of a Subgrid Item</a> <a href="#ref-for-explicit-grid①">(2)</a> <a href="#ref-for-explicit-grid②">(3)</a> <a href="#ref-for-explicit-grid③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid">
   <a href="https://drafts.csswg.org/css-grid-1/#grid">https://drafts.csswg.org/css-grid-1/#grid</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid">2. 
Subgrids</a>
    <li><a href="#ref-for-grid①">2.2. 
Characteristics of a Subgrid Item</a> <a href="#ref-for-grid②">(2)</a> <a href="#ref-for-grid③">(3)</a> <a href="#ref-for-grid④">(4)</a> <a href="#ref-for-grid⑤">(5)</a>
    <li><a href="#ref-for-grid⑥">2.4. 
Subgrid Sizing Algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-area">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-area">https://drafts.csswg.org/css-grid-1/#grid-area</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-area">2.2. 
Characteristics of a Subgrid Item</a>
    <li><a href="#ref-for-grid-area①">2.4. 
Subgrid Sizing Algorithm</a> <a href="#ref-for-grid-area②">(2)</a> <a href="#ref-for-grid-area③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-column">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-column">https://drafts.csswg.org/css-grid-1/#grid-column</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-column">2.4. 
Subgrid Sizing Algorithm</a> <a href="#ref-for-grid-column①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-container">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-container">https://drafts.csswg.org/css-grid-1/#grid-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-container">2. 
Subgrids</a> <a href="#ref-for-grid-container①">(2)</a> <a href="#ref-for-grid-container②">(3)</a> <a href="#ref-for-grid-container③">(4)</a>
    <li><a href="#ref-for-grid-container④">2.2. 
Characteristics of a Subgrid Item</a>
    <li><a href="#ref-for-grid-container⑤">2.3. 
Resolved Value of a Track Listing</a>
    <li><a href="#ref-for-grid-container⑥">2.4. 
Subgrid Sizing Algorithm</a> <a href="#ref-for-grid-container⑦">(2)</a> <a href="#ref-for-grid-container⑧">(3)</a> <a href="#ref-for-grid-container⑨">(4)</a> <a href="#ref-for-grid-container①⓪">(5)</a> <a href="#ref-for-grid-container①①">(6)</a> <a href="#ref-for-grid-container①②">(7)</a> <a href="#ref-for-grid-container①③">(8)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-formatting-context">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-formatting-context">https://drafts.csswg.org/css-grid-1/#grid-formatting-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-formatting-context">2.1. 
Establishing a Subgrid</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-item">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-item">https://drafts.csswg.org/css-grid-1/#grid-item</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-item">2. 
Subgrids</a> <a href="#ref-for-grid-item①">(2)</a> <a href="#ref-for-grid-item②">(3)</a> <a href="#ref-for-grid-item③">(4)</a>
    <li><a href="#ref-for-grid-item④">2.2. 
Characteristics of a Subgrid Item</a> <a href="#ref-for-grid-item⑤">(2)</a> <a href="#ref-for-grid-item⑥">(3)</a> <a href="#ref-for-grid-item⑦">(4)</a> <a href="#ref-for-grid-item⑧">(5)</a> <a href="#ref-for-grid-item⑨">(6)</a> <a href="#ref-for-grid-item①⓪">(7)</a>
    <li><a href="#ref-for-grid-item①①">2.4. 
Subgrid Sizing Algorithm</a> <a href="#ref-for-grid-item①②">(2)</a> <a href="#ref-for-grid-item①③">(3)</a> <a href="#ref-for-grid-item①④">(4)</a> <a href="#ref-for-grid-item①⑤">(5)</a> <a href="#ref-for-grid-item①⑥">(6)</a> <a href="#ref-for-grid-item①⑦">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-row">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-row">https://drafts.csswg.org/css-grid-1/#grid-row</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-row">2.4. 
Subgrid Sizing Algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-span">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-span">https://drafts.csswg.org/css-grid-1/#grid-span</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-span">2.1. 
Establishing a Subgrid</a>
    <li><a href="#ref-for-grid-span①">2.2. 
Characteristics of a Subgrid Item</a> <a href="#ref-for-grid-span②">(2)</a> <a href="#ref-for-grid-span③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-track">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-track">https://drafts.csswg.org/css-grid-1/#grid-track</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-track">2.2. 
Characteristics of a Subgrid Item</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-grid-column">
   <a href="https://drafts.csswg.org/css-grid-1/#propdef-grid-column">https://drafts.csswg.org/css-grid-1/#propdef-grid-column</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-grid-column">2.2. 
Characteristics of a Subgrid Item</a>
    <li><a href="#ref-for-propdef-grid-column①">2.3. 
Resolved Value of a Track Listing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-placement-property">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-placement-property">https://drafts.csswg.org/css-grid-1/#grid-placement-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-placement-property">2.2. 
Characteristics of a Subgrid Item</a> <a href="#ref-for-grid-placement-property①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-grid-template-areas">
   <a href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas">https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-grid-template-areas">2.2. 
Characteristics of a Subgrid Item</a> <a href="#ref-for-propdef-grid-template-areas①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-grid-template-columns">
   <a href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-grid-template-columns">2.1. 
Establishing a Subgrid</a>
    <li><a href="#ref-for-propdef-grid-template-columns①">2.3. 
Resolved Value of a Track Listing</a> <a href="#ref-for-propdef-grid-template-columns②">(2)</a>
    <li><a href="#ref-for-propdef-grid-template-columns③"> Changes since the
	August 2018
	CSS Grid Layout Level 2 Working Draft</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-grid-template-rows">
   <a href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows">https://drafts.csswg.org/css-grid-1/#propdef-grid-template-rows</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-grid-template-rows">2.1. 
Establishing a Subgrid</a>
    <li><a href="#ref-for-propdef-grid-template-rows①">2.3. 
Resolved Value of a Track Listing</a>
    <li><a href="#ref-for-propdef-grid-template-rows②"> Changes since the
	August 2018
	CSS Grid Layout Level 2 Working Draft</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-implicit-grid-track">
   <a href="https://drafts.csswg.org/css-grid-1/#implicit-grid-track">https://drafts.csswg.org/css-grid-1/#implicit-grid-track</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-implicit-grid-track">2.2. 
Characteristics of a Subgrid Item</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-implicit-named-line">
   <a href="https://drafts.csswg.org/css-grid-1/#implicit-named-line">https://drafts.csswg.org/css-grid-1/#implicit-named-line</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-implicit-named-line">2.2. 
Characteristics of a Subgrid Item</a> <a href="#ref-for-implicit-named-line①">(2)</a> <a href="#ref-for-implicit-named-line②">(3)</a>
    <li><a href="#ref-for-implicit-named-line③"> Changes since the
	August 2018
	CSS Grid Layout Level 2 Working Draft</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-named-grid-area">
   <a href="https://drafts.csswg.org/css-grid-1/#named-grid-area">https://drafts.csswg.org/css-grid-1/#named-grid-area</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-named-grid-area">2.2. 
Characteristics of a Subgrid Item</a> <a href="#ref-for-named-grid-area①">(2)</a> <a href="#ref-for-named-grid-area②">(3)</a> <a href="#ref-for-named-grid-area③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-grid-template-rows-none">
   <a href="https://drafts.csswg.org/css-grid-1/#valdef-grid-template-rows-none">https://drafts.csswg.org/css-grid-1/#valdef-grid-template-rows-none</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-grid-template-rows-none">2.1. 
Establishing a Subgrid</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-repeat">
   <a href="https://drafts.csswg.org/css-grid-1/#funcdef-repeat">https://drafts.csswg.org/css-grid-1/#funcdef-repeat</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-repeat">2.1. 
Establishing a Subgrid</a>
    <li><a href="#ref-for-funcdef-repeat①">2.3. 
Resolved Value of a Track Listing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-multi-column-container">
   <a href="https://drafts.csswg.org/css-multicol-1/#multi-column-container">https://drafts.csswg.org/css-multicol-1/#multi-column-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-multi-column-container">2.4. 
Subgrid Sizing Algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-overflow">
   <a href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">https://drafts.csswg.org/css-overflow-3/#propdef-overflow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-overflow">2.2. 
Characteristics of a Subgrid Item</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-available">
   <a href="https://drafts.csswg.org/css-sizing-3/#available">https://drafts.csswg.org/css-sizing-3/#available</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-available">2.4. 
Subgrid Sizing Algorithm</a> <a href="#ref-for-available①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-definite">
   <a href="https://drafts.csswg.org/css-sizing-3/#definite">https://drafts.csswg.org/css-sizing-3/#definite</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-definite">2.4. 
Subgrid Sizing Algorithm</a> <a href="#ref-for-definite①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-max-content-contribution">
   <a href="https://drafts.csswg.org/css-sizing-3/#max-content-contribution">https://drafts.csswg.org/css-sizing-3/#max-content-contribution</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-max-content-contribution">2.4. 
Subgrid Sizing Algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-min-content-contribution">
   <a href="https://drafts.csswg.org/css-sizing-3/#min-content-contribution">https://drafts.csswg.org/css-sizing-3/#min-content-contribution</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-min-content-contribution">2.4. 
Subgrid Sizing Algorithm</a> <a href="#ref-for-min-content-contribution①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-stretch-fit">
   <a href="https://drafts.csswg.org/css-sizing-3/#stretch-fit">https://drafts.csswg.org/css-sizing-3/#stretch-fit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-stretch-fit">2.4. 
Subgrid Sizing Algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-integer-value">
   <a href="https://drafts.csswg.org/css-values-3/#integer-value">https://drafts.csswg.org/css-values-3/#integer-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-integer-value">2.1. 
Establishing a Subgrid</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-zero-plus">
   <a href="https://drafts.csswg.org/css-values-4/#mult-zero-plus">https://drafts.csswg.org/css-values-4/#mult-zero-plus</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-zero-plus">2.1. 
Establishing a Subgrid</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-one-plus">
   <a href="https://drafts.csswg.org/css-values-4/#mult-one-plus">https://drafts.csswg.org/css-values-4/#mult-one-plus</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-one-plus">2.1. 
Establishing a Subgrid</a> <a href="#ref-for-mult-one-plus①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-comma">
   <a href="https://drafts.csswg.org/css-values-4/#comb-comma">https://drafts.csswg.org/css-values-4/#comb-comma</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-comma">2.1. 
Establishing a Subgrid</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-identifier-value">
   <a href="https://drafts.csswg.org/css-values-4/#identifier-value">https://drafts.csswg.org/css-values-4/#identifier-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-identifier-value">2.1. 
Establishing a Subgrid</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-opt">
   <a href="https://drafts.csswg.org/css-values-4/#mult-opt">https://drafts.csswg.org/css-values-4/#mult-opt</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-opt">2.1. 
Establishing a Subgrid</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">2.1. 
Establishing a Subgrid</a> <a href="#ref-for-comb-one①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-axis">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#block-axis">https://drafts.csswg.org/css-writing-modes-4/#block-axis</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-axis">2.4. 
Subgrid Sizing Algorithm</a> <a href="#ref-for-block-axis①">(2)</a> <a href="#ref-for-block-axis②">(3)</a> <a href="#ref-for-block-axis③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-block-size">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#block-size">https://drafts.csswg.org/css-writing-modes-4/#block-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-size">2.4. 
Subgrid Sizing Algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-axis">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#inline-axis">https://drafts.csswg.org/css-writing-modes-4/#inline-axis</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-axis">2.4. 
Subgrid Sizing Algorithm</a> <a href="#ref-for-inline-axis①">(2)</a> <a href="#ref-for-inline-axis②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inline-size">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#inline-size">https://drafts.csswg.org/css-writing-modes-4/#inline-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-size">2.4. 
Subgrid Sizing Algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-establish-an-orthogonal-flow">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#establish-an-orthogonal-flow">https://drafts.csswg.org/css-writing-modes-4/#establish-an-orthogonal-flow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-establish-an-orthogonal-flow">2.4. 
Subgrid Sizing Algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-writing-mode">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#writing-mode">https://drafts.csswg.org/css-writing-modes-4/#writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-writing-mode">2.2. 
Characteristics of a Subgrid Item</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-writing-mode">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode">https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-writing-mode">2.4. 
Subgrid Sizing Algorithm</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-resolved-value">
   <a href="https://drafts.csswg.org/cssom-1/#resolved-value">https://drafts.csswg.org/cssom-1/#resolved-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-resolved-value">2.3. 
Resolved Value of a Track Listing</a> <a href="#ref-for-resolved-value①">(2)</a>
    <li><a href="#ref-for-resolved-value②"> Changes since the
	August 2018
	CSS Grid Layout Level 2 Working Draft</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-align-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-align-content" style="color:initial">align-content</span>
     <li><span class="dfn-paneled" id="term-for-propdef-align-self" style="color:initial">align-self</span>
     <li><span class="dfn-paneled" id="term-for-propdef-column-gap" style="color:initial">column-gap</span>
     <li><span class="dfn-paneled" id="term-for-gutter" style="color:initial">gutter</span>
     <li><span class="dfn-paneled" id="term-for-propdef-justify-content" style="color:initial">justify-content</span>
     <li><span class="dfn-paneled" id="term-for-propdef-justify-self" style="color:initial">justify-self</span>
     <li><span class="dfn-paneled" id="term-for-valdef-row-gap-normal" style="color:initial">normal</span>
     <li><span class="dfn-paneled" id="term-for-propdef-row-gap" style="color:initial">row-gap</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-specified-value" style="color:initial">specified value</span>
     <li><span class="dfn-paneled" id="term-for-used-value" style="color:initial">used value</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-display" style="color:initial">display</span>
     <li><span class="dfn-paneled" id="term-for-independent-formatting-context" style="color:initial">independent formatting context</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-flexbox-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-flex-container" style="color:initial">flex container</span>
     <li><span class="dfn-paneled" id="term-for-propdef-flex-flow" style="color:initial">flex-flow</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-GRID-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-repeat-auto-fill" style="color:initial">auto-fill</span>
     <li><span class="dfn-paneled" id="term-for-explicit-grid" style="color:initial">explicit grid</span>
     <li><span class="dfn-paneled" id="term-for-grid" style="color:initial">grid</span>
     <li><span class="dfn-paneled" id="term-for-grid-area" style="color:initial">grid area</span>
     <li><span class="dfn-paneled" id="term-for-grid-column" style="color:initial">grid column</span>
     <li><span class="dfn-paneled" id="term-for-grid-container" style="color:initial">grid container</span>
     <li><span class="dfn-paneled" id="term-for-grid-formatting-context" style="color:initial">grid formatting context</span>
     <li><span class="dfn-paneled" id="term-for-grid-item" style="color:initial">grid item</span>
     <li><span class="dfn-paneled" id="term-for-grid-row" style="color:initial">grid row</span>
     <li><span class="dfn-paneled" id="term-for-grid-span" style="color:initial">grid span</span>
     <li><span class="dfn-paneled" id="term-for-grid-track" style="color:initial">grid track</span>
     <li><span class="dfn-paneled" id="term-for-propdef-grid-column" style="color:initial">grid-column</span>
     <li><span class="dfn-paneled" id="term-for-grid-placement-property" style="color:initial">grid-placement property</span>
     <li><span class="dfn-paneled" id="term-for-propdef-grid-template-areas" style="color:initial">grid-template-areas</span>
     <li><span class="dfn-paneled" id="term-for-propdef-grid-template-columns" style="color:initial">grid-template-columns</span>
     <li><span class="dfn-paneled" id="term-for-propdef-grid-template-rows" style="color:initial">grid-template-rows</span>
     <li><span class="dfn-paneled" id="term-for-implicit-grid-track" style="color:initial">implicit grid track</span>
     <li><span class="dfn-paneled" id="term-for-implicit-named-line" style="color:initial">implicit named line</span>
     <li><span class="dfn-paneled" id="term-for-named-grid-area" style="color:initial">named grid area</span>
     <li><span class="dfn-paneled" id="term-for-valdef-grid-template-rows-none" style="color:initial">none</span>
     <li><span class="dfn-paneled" id="term-for-funcdef-repeat" style="color:initial">repeat()</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-multicol-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-multi-column-container" style="color:initial">multi-column container</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-overflow" style="color:initial">overflow</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-sizing-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-available" style="color:initial">available space</span>
     <li><span class="dfn-paneled" id="term-for-definite" style="color:initial">definite</span>
     <li><span class="dfn-paneled" id="term-for-max-content-contribution" style="color:initial">max-content contribution</span>
     <li><span class="dfn-paneled" id="term-for-min-content-contribution" style="color:initial">min-content contribution</span>
     <li><span class="dfn-paneled" id="term-for-stretch-fit" style="color:initial">stretch fit</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-integer-value" style="color:initial">&lt;integer></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mult-zero-plus" style="color:initial">*</span>
     <li><span class="dfn-paneled" id="term-for-mult-one-plus" style="color:initial">+</span>
     <li><span class="dfn-paneled" id="term-for-comb-comma" style="color:initial">,</span>
     <li><span class="dfn-paneled" id="term-for-identifier-value" style="color:initial">&lt;custom-ident></span>
     <li><span class="dfn-paneled" id="term-for-mult-opt" style="color:initial">?</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-block-axis" style="color:initial">block axis</span>
     <li><span class="dfn-paneled" id="term-for-block-size" style="color:initial">block size</span>
     <li><span class="dfn-paneled" id="term-for-inline-axis" style="color:initial">inline axis</span>
     <li><span class="dfn-paneled" id="term-for-inline-size" style="color:initial">inline size</span>
     <li><span class="dfn-paneled" id="term-for-establish-an-orthogonal-flow" style="color:initial">orthogonal flow</span>
     <li><span class="dfn-paneled" id="term-for-writing-mode" style="color:initial">writing mode</span>
     <li><span class="dfn-paneled" id="term-for-propdef-writing-mode" style="color:initial">writing-mode</span>
    </ul>
   <li>
    <a data-link-type="biblio">[cssom-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-resolved-value" style="color:initial">resolved value</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-align-3">[CSS-ALIGN-3]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Module Level 3</a>. 6 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-align-3/">https://www.w3.org/TR/css-align-3/</a>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-css-grid-1">[CSS-GRID-1]
   <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout Module Level 1</a>. 14 December 2017. CR. URL: <a href="https://www.w3.org/TR/css-grid-1/">https://www.w3.org/TR/css-grid-1/</a>
   <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3]
   <dd>David Baron; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>. 31 July 2018. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a>
   <dt id="biblio-css-sizing-3">[CSS-SIZING-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-sizing-3/">CSS Intrinsic &amp; Extrinsic Sizing Module Level 3</a>. 22 May 2019. WD. URL: <a href="https://www.w3.org/TR/css-sizing-3/">https://www.w3.org/TR/css-sizing-3/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a>
   <dt id="biblio-cssom-1">[CSSOM-1]
   <dd>Simon Pieters; Glenn Adams. <a href="https://www.w3.org/TR/cssom-1/">CSS Object Model (CSSOM)</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-1/">https://www.w3.org/TR/cssom-1/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css-flexbox-1">[CSS-FLEXBOX-1]
   <dd>Tab Atkins Jr.; et al. <a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a>. 19 November 2018. CR. URL: <a href="https://www.w3.org/TR/css-flexbox-1/">https://www.w3.org/TR/css-flexbox-1/</a>
   <dt id="biblio-css-multicol-1">[CSS-MULTICOL-1]
   <dd>Florian Rivoal; Rachel Andrew. <a href="https://www.w3.org/TR/css-multicol-1/">CSS Multi-column Layout Module Level 1</a>. 28 May 2018. WD. URL: <a href="https://www.w3.org/TR/css-multicol-1/">https://www.w3.org/TR/css-multicol-1/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <p>No properties defined.</p>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> The full text of the Grid specification will be folded in when this draft reaches CR.<a href="#issue-3b09474d"> ↵ </a></div>
   <div class="issue"> Note, this means that a subgrid establishing an orthogonal flow
	would have the order of its track sizing inverted compared to a nested grid.
	We could simplify this by saying that an orthogonal flow
	cannot establish a subgrid; it can only be a nested grid.<a href="#issue-28e6e962"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="subgrid">
   <b><a href="#subgrid">#subgrid</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-subgrid">2. 
Subgrids</a>
    <li><a href="#ref-for-subgrid①">2.1. 
Establishing a Subgrid</a> <a href="#ref-for-subgrid②">(2)</a>
    <li><a href="#ref-for-subgrid③">2.2. 
Characteristics of a Subgrid Item</a> <a href="#ref-for-subgrid④">(2)</a> <a href="#ref-for-subgrid⑤">(3)</a> <a href="#ref-for-subgrid⑥">(4)</a> <a href="#ref-for-subgrid⑦">(5)</a> <a href="#ref-for-subgrid⑧">(6)</a> <a href="#ref-for-subgrid⑨">(7)</a> <a href="#ref-for-subgrid①⓪">(8)</a> <a href="#ref-for-subgrid①①">(9)</a> <a href="#ref-for-subgrid①②">(10)</a> <a href="#ref-for-subgrid①③">(11)</a> <a href="#ref-for-subgrid①④">(12)</a> <a href="#ref-for-subgrid①⑤">(13)</a> <a href="#ref-for-subgrid①⑥">(14)</a> <a href="#ref-for-subgrid①⑦">(15)</a> <a href="#ref-for-subgrid①⑧">(16)</a> <a href="#ref-for-subgrid①⑨">(17)</a> <a href="#ref-for-subgrid②⓪">(18)</a> <a href="#ref-for-subgrid②①">(19)</a> <a href="#ref-for-subgrid②②">(20)</a>
    <li><a href="#ref-for-subgrid②③">2.3. 
Resolved Value of a Track Listing</a> <a href="#ref-for-subgrid②④">(2)</a>
    <li><a href="#ref-for-subgrid②⑤"> Changes since the
	August 2018
	CSS Grid Layout Level 2 Working Draft</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-grid-template-rows-subgrid">
   <b><a href="#valdef-grid-template-rows-subgrid">#valdef-grid-template-rows-subgrid</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-grid-template-rows-subgrid">2.1. 
Establishing a Subgrid</a> <a href="#ref-for-valdef-grid-template-rows-subgrid①">(2)</a>
    <li><a href="#ref-for-valdef-grid-template-rows-subgrid②">2.3. 
Resolved Value of a Track Listing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-line-name-list">
   <b><a href="#typedef-line-name-list">#typedef-line-name-list</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-line-name-list">2.1. 
Establishing a Subgrid</a> <a href="#ref-for-typedef-line-name-list①">(2)</a> <a href="#ref-for-typedef-line-name-list②">(3)</a> <a href="#ref-for-typedef-line-name-list③">(4)</a> <a href="#ref-for-typedef-line-name-list④">(5)</a> <a href="#ref-for-typedef-line-name-list⑤">(6)</a> <a href="#ref-for-typedef-line-name-list⑥">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-line-names">
   <b><a href="#typedef-line-names">#typedef-line-names</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-line-names">2.1. 
Establishing a Subgrid</a> <a href="#ref-for-typedef-line-names①">(2)</a> <a href="#ref-for-typedef-line-names②">(3)</a> <a href="#ref-for-typedef-line-names③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-name-repeat">
   <b><a href="#typedef-name-repeat">#typedef-name-repeat</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-name-repeat">2.1. 
Establishing a Subgrid</a> <a href="#ref-for-typedef-name-repeat①">(2)</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>